import {
    InitailTypes
} from './types/index';

import utils from "./utils/index";

import OwnLib from './lib/index'

class Tree {
    /** 配置参数*/
    private options: InitailTypes;
    
    private jsonArr: Array<any>;

    private tree: Array<any>;

    constructor(options: InitailTypes) {
        if (!options.el || (options.el == null && options.el == "")) {
            throw new Error("Root node cannot be empty");
        }
        this.options = Object.assign({}, utils.defaultConfig, options);
        
        if(!(this.options.mode === 'vertical' || this.options.mode === "horizontal")){
            throw new Error("The value of 'options.mode' can only be 'vertical' or 'horizontal'");
        }
        if ('list' === this.options.type) {
            this.tree = utils.convertToTreeData(
                options.jsonArr,
                this.options.selfIdField,
                this.options.parentIdField,
                this.options.parentld
            );
            this.jsonArr = options.jsonArr;
        } else if ('tree' === this.options.type) {
            this.tree = this.options.jsonArr;
            // 此处需做深克隆 不然会导致 渲染数据混乱
            let tempArr = JSON.parse(JSON.stringify(this.options.jsonArr));
            this.options.jsonArr = utils.flatten(tempArr);
        } else {
            throw Error('参数异常: type可选值为 "list"|"tree" ')
        }
        this.render();
    }

    render() {
        if (this.tree.length < 1) return;
        // 容器创建
        let wrap = document.createElement("div");
        wrap.classList.add("un-org-tree--wrapper");

        let ul = document.createElement("ul");
        ul.classList.add("un-org-tree", this.options.mode);
        if (this.options.viewClass) {
            ul.classList.add(this.options.viewClass);
        }
        wrap.append(ul);
        let nodeString:any
        if(this.options.mode === 'vertical') {
            nodeString = OwnLib.getItemStringForVertical(this.tree, this.options)
        }
        if(this.options.mode === 'horizontal'){
            nodeString = OwnLib.getItemStringForHorizontal(this.tree, this.options)
        }

        ul.innerHTML = nodeString;
        // 绑定事件
        this.bindEvent(ul);

        // @ts-ignore
        this.options.el.innerHTML = "";

        // @ts-ignore
        this.options.el.appendChild(wrap);
        // 设置辅助线宽度 高度 ...
        if(this.options.mode === 'vertical') {
            OwnLib.setHorizontalLineWidth(this.options.el)
        }
        if(this.options.mode === 'horizontal'){
            OwnLib.setHorizontalLineHeight(this.options.el)
        }
    }
    bindEvent(el: any) {
        // 事件委托
        el.addEventListener("click", (e:any) => {
            if (
                el.contains(e.target) &&
                e.target.tagName == "SPAN" &&
                e.target.dataset.id
            ) {
                let id = e.target.dataset.id;
                let data = this.options.jsonArr.filter(
                    item => item[this.options.selfIdField] === e.target.dataset.id
                );
                this.options.click(id, data[0], e.target);
            }
        });
    }
}

export default Tree;